
<template>
  <div>
    <div class="swiper_container rounded-[8px] overflow-hidden" ref="swiperRef">
            <div :class="index==0||index==-1?'noAnimate':'animate'" class='swiper_content'  :style="{transform:`translateX(${scrollWin}px)`}">
                <div class="swiper_item"
                
                :style="{width:w+'px'}"
                v-for="(item,index) in imgs" :key="index">
                    <img :src="item.img" alt="" class="object-cover">
                </div>
            </div>
            <!-- <div class="dots_wrap">
                <span :class="index==idx?'active':''" class="dot" v-for="(item,idx) of imgs1.length" :key="idx"></span>
            </div> -->
            <!-- <span class="left_btn" @click="clickLeft">left</span> -->
            <!-- <span class="right_btn" @click="clickRight">right</span> -->
    </div>
  </div>
  </template>

<script setup>
import { ref, reactive, toRefs, onMounted, defineProps } from 'vue'

import b1 from '@assets/banner/微电源模块1890×780.png'
import b2 from '@assets/banner/智能功率电源块1890×780.png'
import b3 from '@assets/banner/智能功率级芯片1890×780.png'
import b4 from '@assets/banner/电源控制器1890×780.png'
import b5 from '@assets/banner/电源芯片1890×780.png'


const swiperRef=ref(null)
let w=ref(630)
let scrollWin=ref(0)
const index=ref(0)
const imgs1=[
    {id:"001",img: b1.src},
    {id:"002",img: b2.src},
    {id:"003",img: b3.src},
    {id:"004",img: b4.src},
    {id:"005",img: b5.src},
]
const props = defineProps({
  imgs: {type: Array,default: () => defaultImgs},
  loop: {type: Boolean,default: true},
})
const imgs= props.imgs||imgs1

const firstimg= imgs&&imgs?.[0]
const lastimg= imgs[imgs.length-1]
console.log('-lastimg-')
onMounted(() => {
    
 w.value=swiperRef._value.offsetWidth
 console.log(w.value)
})

const clickLeft=()=>{
    index.value--;
    if(index.value<=-1){
        scrollWin.value=-w.value*imgs.length
        setTimeout(()=>{
            index.value=4     
            scrollWin.value=-index.value*w.value;
        },0)
    }else{
         scrollWin.value=-index.value*w.value;
    }
}


const clickRight=()=>{
    index.value++;
  
    if(index.value>=5){
        setTimeout(()=>{
            imgs.push(firstimg)
            index.value=0;
            scrollWin.value=0
        },200)
    }
    scrollWin.value=-index.value*w.value;
  }
       setInterval(()=>{
      if(props.loop)  clickRight()
    },2000)

</script>
<style>
.swiper_container{
    width: 100%;
    height: 260px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}
.swiper_content{
    display: flex;
    position: absolute;
    top:0;
    left:0;
    height: 100%;
    background: #333;
    border-radius: 8px;
    overflow: hidden;
   
}
.dots_wrap{
    position: absolute;
    bottom: 0;
    width: 50%;
    left:50%;
    transform: translate(-50%,-50%);
    text-align: center;
}
.swiper_item{
    margin: 0;
    flex-basis: 100%;
   
  
}
.swiper_item img{
    width: 100%;
    height: 100%;
    /* object-fit: contain; */
    border-radius: 8px;
    overflow: hidden;
}
.dot{
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    z-index: 1;
    background: #fff;
    margin: 0 10px;
}
.active{
    background: #f90;
}
.left_btn,.right_btn{
    display: inline-block;
    width: 60px;
    height: 42px;
    background: #000;
    color:#fff;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.left_btn{
    position: absolute;
    top:50%;
    left:20px;
    
}
.right_btn{
    position: absolute;
    top:50%;
    right:20px
}
.noAnimate{
    transition: none;
}
.animate{
    transition: all 0.4s;
}
.active{
    color:#f00
}

  </style>